<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            padding: 20px;
            transition-duration: .5s;
        }
        body{
            transition-duration: .5s;
        }
    </style>
</head>

<body>
    <h1>admin</h1>
    <button>item1</button><button>item2</button>
    <script>
        // call apply bind 使用改变this
        function User(name) { // 构造函数
            this.name = name; // this开始指向{}
        }
        let user = new User('李思'); // 构造后this指向user对象
        console.log(user)
        let zh = { url: 'baidu.com' };
        User.call(zh, '张三');
        console.log(zh); // {url: "baidu.com", name: "张三"}

        // apply与call区别
        let zhangsan = {
            name: '张三'
        }
        let lisi = {
            name: '李思'
        }

        function Persnal(a, b) {
            console.log(this.name + a + b);
        }
        Persnal.call(zhangsan, 'amumu', 'haha'); // call改变this指向zhangsan 并立刻执行
        Persnal.apply(zhangsan, ['amumu', 'haha']); // apply与call只是传递参数方式不一样
    
        const btns = document.querySelectorAll('button');
        btns.forEach(item=>{
            item.addEventListener('click',(ev)=>{
                console.log(ev.target.innerHTML)
            })
        })

        // 找出最大值
        const arr = [1,5,6,7,2];
        console.log(Math.max.apply(Math,arr)) // apply是使用数组方式传参
    
        // bind 随机变色
        function Color(el){
            this.el = el;
            this.colors = ["#125","f20","#369","red","blue","yellow"];
            this.run = function(){
                setInterval(function(){
                   let i = Math.floor(Math.random()*this.colors.length);
                   console.log(i) 
                   this.el.style.backgroundColor = this.colors[i];
                }.bind(this), 1000);
            }
        }
        let obj = new Color(document.body);
        obj.run();
        let h1 = new Color(document.querySelector('h1'));
        h1.run();

    </script>
</body>

</html>